import { Button, Modal, TextField, Icon } from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./index.module.less";

interface ValueChildren {
  number: string;
  YSgs: string;
}
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  //   const activator = <Button onClick={handleChange}>Open</Button>;

  const [value, setValue] = useState([
    {
      number: "",
      YSgs: "",
    },
  ]);

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>添加运单信息</div>
      </div>
      <div className={styled.CHXPO}>
        {value.map((item, index) => {
          return (
            <div className={styled.WDSABN} key={index}>
              <div className={styled.GYDESA}>
                <TextField
                  label="运单号"
                  value={item.number}
                  onChange={(newValue: string) => {
                    let values = [] as ValueChildren[];
                    value.forEach((item, i) => {
                      if (index === i) {
                        values.push({
                          number: newValue,
                          YSgs: value[index].YSgs,
                        });
                      } else {
                        values.push(item);
                      }
                    });
                    setValue(values);
                  }}
                  autoComplete="off"
                />
              </div>
              {index == 0 ? (
                <div className={styled.GYDESAs}>
                  <TextField
                    label="运输承运商"
                    value={item.YSgs}
                    onChange={(newValue: string) => {
                      let values = [] as ValueChildren[];
                      value.forEach((item, i) => {
                        if (index === i) {
                          values.push({
                            number: value[index].number,
                            YSgs: newValue,
                          });
                        } else {
                          values.push(item);
                        }
                      });
                      setValue(values);
                    }}
                    autoComplete="off"
                  />
                </div>
              ) : (
                <div className={styled.GYDESAs}>
                  <TextField
                    disabled
                    label="运输承运商"
                    value={item.YSgs}
                    onChange={(newValue: string) => {
                      let values = [] as ValueChildren[];
                      value.forEach((item, i) => {
                        if (index === i) {
                          values.push({
                            number: value[index].number,
                            YSgs: newValue,
                          });
                        } else {
                          values.push(item);
                        }
                      });
                      setValue(values);
                    }}
                    autoComplete="off"
                  />
                </div>
              )}
              {value.length > 1 && (
                <div className={styled.DeleteMinor}>
                  <Icon source={DeleteMinor}></Icon>
                </div>
              )}
            </div>
          );
        })}
        <div className={styled.TJQTGZBH}>
          <div>
            <Icon source={AddMajor} color="highlight"></Icon>
          </div>
          <div>
            <Button
              plain
              onClick={() => {
                setValue([
                  ...value,
                  {
                    number: "",
                    YSgs: "",
                  },
                ]);
              }}
            >
              添加其他跟踪编号
            </Button>
          </div>
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            保存
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
